﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>repaire</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei, Tahoma, Verdana;
            font-size: 12px;
            color: #646f83;
            overflow: hidden;
            background-color: #fff
        }

        .wrapper {
            height: 110px;
            width: 400px;
            margin: 270px auto;
            border-radius: 5px;
            text-align: center;
        }



        .doing {
            display: block;
        }
        .done {
            display: none;
            height: 205px;
            margin-top: 157px;
        }

        [class^="icon"], [class^="btn"] {
            display: inline-block;
        }

        .icon-green-alert {
            cursor: default;
            width: 38px;
            height: 38px;
            background: transparent url("") 0 0 no-repeat;
        }

        .btn-reopen-qqfind {
            width: 136px;
            height: 37px;
            background: transparent url("") 0 0 no-repeat;
        }
        .btn-reopen-qqfind:hvoer {
            background-image: url("");
        }
        .btn-reopen-qqfind:active {
            background-image: url("");
        }

        .head-info-word {
            font-size: 20px;
            vertical-align: 13px;
            margin-left: 10px;
        }
        .body-info {
            margin: 20px 0;
            width: 400px;
            height: 80px;
            position: relative;
        }

        .body-info-ul {
            width: 100px;
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -43px;
        }

        .body-info-ul li{
            text-align: left;
            line-height: 20px;
            font-size: 12px;
        }

        #upload-diagnose-info-flag {
            vertical-align: -2px;
        }

    </style>
</head>
<body>
<div class="wrapper doing">
    <div class="err-p">
        <img
            src=""
            alt="repairing"/>
    </div>
    <div class="wording">
        <span>正在修复页面，请稍后...</span>
    </div>
</div>
<div class="wrapper done">
    <div class="head-info">
        <a class="icon-green-alert" href="javascript:void(0);"></a>
        <span class="head-info-word">已修复当前页面</span>
    </div>
    <div class="body-info">
        <ul class="body-info-ul">
            <li>已清除本地缓存</li>
            <li>已清除DNS缓存</li>
            <li>已修复Jscript.dll</li>
            <li>
			  <div class="upload-diagnose">
                <input type="checkbox" id="upload-diagnose-info-flag" checked/>
                <label for="upload-diagnose-info-flag">上传诊断信息</label>
			  </div>
            </li>
        </ul>
    </div>
    <div class="footer-info">
        <a style="text-indent: -2000px" title="重新打开页面" class="btn-reopen-qqfind" data-reopen-qqfind="true" href="javascript:void(0);">重新打开页面</a>
    </div>
</div>
<script type="text/javascript">
	    /**
     * 调用客户端接口的中转函数
     * @param func
     * @param args
     * @returns {*}
     */
	 
    function callClient(func, args) {
        try {
            args = args || [];
            var rs = external[func].apply(null, args);
            return rs;
        } catch (e){
            return null;
        }
    }

    /**
     * 用来在客户端完成修复工作之后， 展示此页面
     * 展示客户端完成修复的div
     */
    function showDoneInfo() {
        var doingWrapper = document.querySelector(".doing"),
            doneWrapper = document.querySelector(".done");

        doingWrapper.style.display = "none";
        doneWrapper.style.display = "block";
    };
	
	function hideUploadDiagInfoFlag(){
		var node = document.querySelector(".upload-diagnose");
		node.style.display = "none";
	}
	
    var isRepairPage = function(){
		return 1;
	};

    /**
     * 当客户端完成修复工作， 调用html页面
     * 此js接口
     */
	 /**
     * 通知客户端Web已准备好,延迟1s
     * 此js接口
     */
	 setTimeout(function(){
		window.onRepairState = function(stage){
			if(stage == "DONE"){
				showDoneInfo();	
			}else if(stage == "HIDEUPLOADFLAG"){
			    hideUploadDiagInfoFlag();
			}
		};
		
		callClient("notifyRepairPageReady", []);
	 }, 1000);
	 
	 /**
     * 为了保证重新加载页面出来，设置超时8s
     * 
     */
	 setTimeout(function(){
		showDoneInfo();
	 }, 8000); 
    /**
     * 在用户点击重新打开查找时，重新加载页面
     * @param uploadDiagnoseInfo 是否上传用户诊断信息
     */
    var reloadFindPage = function(uploadDiagnoseInfo) {
        var flag = uploadDiagnoseInfo ? 1 : 0;
        callClient("reloadMainPage", [flag]);
    };
	
	

    /**
     * 事件绑定， 触发重新打开查找的动作
     */
    document.addEventListener("click", function(event) {
        var target = event.target,
            dataset = target.dataset,
            uploadDiagnoseInfoFlag = document.getElementById("upload-diagnose-info-flag").checked ? 1 : 0;
        if (dataset["reopenQqfind"]) {

            /*
             * 点击了重新打开查找按钮
             * 检验用户是否勾选了上传诊断信息
             */
            reloadFindPage(uploadDiagnoseInfoFlag);
        }
    }, false);
</script>
</body>
</html>
